<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <button type="button" onclick="get1()">get请求不带参数</button><br>
    <button type="button" onclick="get2()">get请求带参数</button><br>
    <button type="button" onclick="post1()">post请求不带参数</button><br>
    <button type="button" onclick="post2()">post请求带参数</button><br>
    <button type="button" onclick="post3()">post请求带参数[json]</button><br>
</body>
<script>
    // get请求不带参数
    function get1() {
        // 使用jQ发送ajax请求
        // 他接受一个参数  对象
        $.ajax({
            // 请求类型
            type: "GET",
            // 请求地址
            url: "http://localhost:3000/get1",
            // 回调函数1 success 成功  res存着响应数据
            success: function (res) {
                console.log(res);
            },
            // 回调函数1 error 失败  错误
            // xhr 指的是ajax对象  xhr.status 存着响应状态码
            // errortype错误类型

            error: function (xhr, errortype) {
                console.log(xhr.status);
            }
        })
    }
    // get请求带参数
    function get2() {
        // 使用jQ发送ajax请求
        // 他接受一个参数  对象
        $.ajax({
            // 请求类型
            type: "GET",
            // 请求地址
            url: "http://localhost:3000/get2",
            // JQ传递数据非常简单不需要手动拼接，给他一个对象就行
            data:{
                username: "张凡",
                password: 123456
            },
            // 回调函数1 success 成功  res存着响应数据
            success: function (res) {
                console.log(res);
            },
            // 回调函数1 error 失败  错误
            // xhr 指的是ajax对象  xhr.status 存着响应状态码
            // errortype错误类型

            error: function (xhr, errortype) {
                console.log(xhr.status);
            }
        })
    }
    // post请求不带参数
    function post1(){
        $.ajax({
            // type 请求类型
            type: "POST",
            // url 请求地址
            url: "http://localhost:3000/post1",
            success: function(res){
                // 打印请求结果
                console.log(res);
            },
            error: function(){
                // 输出响应状态码
                console.log(xhr.status);
            }

        })
    }
    // post请求带参数
    function post2(){
        $.ajax({
            // type 请求类型
            type: "POST",
            // url 请求地址
            url: "http://localhost:3000/post2",
            data:{
                username: "张凡",
                password: 123456
            },
            success: function(res){
                // 打印请求结果
                console.log(res);
            },
            error: function(){
                // 输出响应状态码
                console.log(xhr.status);
            }

        })
    }
    // post请求带参数，接收数据类型是json
    function post3(){
        $.ajax({
            // type 请求类型
            type: "POST",
            // url 请求地址
            url: "http://localhost:3000/post3",
            data:{
                username: "张凡",
                password: 123456
            },
            // 设置接受的数据类型为json
            dataType: "json",
            success: function(res){
                // 打印请求结果
                // 接受到的也是一个字符串，你需要自己把他转化为对象
                // 只要你设置了接收数据的类型为json,他会自动给你转化为对象
                console.log(res);
            },
            error: function(){
                // 输出响应状态码
                console.log(xhr.status);
            }
        })
    }

</script>

</html>